<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <title>岛途店小二</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .di {
      position: relative;
      height: 100vh;
      width: 100vw;
      /* width: 750/16rem; */
      background-image: url('./bgc.png');
      background-size: 100% 100%;

    }

    img {
      width: 100%;
      height: 100%;
    }

    .di .er {
      width: 29.33%;
      height: 16.5%;
      position: absolute;
      top: 68%;
      left: 50%;
      transform: translate(-50%)
    }

    .di .tex {
      width: 100%;
      position: absolute;
      top: 61%;
      left: 50%;
      transform: translate(-50%)
    }

    .di .tex p {
      text-align: center;
      font-size: 3vw;
    }

    a {
      position: absolute;
      background-image: url("./btn-bgc.png");
      width: 29.33333%;
      height: 5%;
      /* display: block; */
      text-align: center;
      text-decoration: none;
      top: 86.5%;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      -webkit-user-select: none;
      -moz-user-focus: none;
      -moz-user-select: none;
      left: 50%;
      transform: translate(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(255, 255, 255, 1);
      background-size: 100% 100%;
      font-size: 4vw;
    }

    .color {
      color: #FF1313
    }

    .text {
      position: absolute;
      top: 94%;
      text-align: center;
      font-size: 3vw;
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="di">
    <div class="tex">
      <p>
        扫码即可开启“岛途店小二”微信小程序
      </p>
      <p><span class="color">登记、核验、入住</span>
        ，一触即达！
      </p>
    </div>
    <div class="er"><img src="https://daotu-website-img.oss-cn-hangzhou.aliyuncs.com/upload-file/20190926133829.png"
        alt=""></div>
    <!-- <a href="weixin://scanqrcode">进入微信</a> -->
    <a href="weixin://" class="tiao">进入微信</a>
    <p class="text">请先保存二维码图片，进入微信后扫一扫~</p>
  </div>
</body>
<!-- <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
  //rem适配可以了
  (function () {
    var styleN = document.createElement("style");
    var width = document.documentElement.clientWidth / 16;
    styleN.innerHTML = 'html{font-size:' + width + 'px!important}';
    document.head.appendChild(styleN);
  })();

  //系统
  //userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值
  var u = navigator.userAgent;

  //Android终端
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;

  //iOS终端
  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

  if (isAndroid) {
    //如果为Android
    console.log('Android')
    $('.tiao').attr('href', 'weixin://')
  }

  if (isiOS) {
    //如果为iOS
    console.log('iOS')
    $('.tiao').attr('href', 'weixin://scanqrcode')
  }
  //系统

  $.fn.longPress = function (fn) {
    let timeout = 0;
    const $this = this;
    for (let i = 0; i < $this.length; i++) {
      $this[i].addEventListener('touchstart', () => {
        timeout = setTimeout(fn, 800); // 长按时间超过800ms，则执行传入的方法 
      }, false);
      $this[i].addEventListener('touchend', () => {
        clearTimeout(timeout); // 长按时间少于800ms，不会执行传入的方法
      }, false);
    }
  };
  $('.er').longPress(() => {
    saveImg();
  });

  function saveImg() { // 想要保存的图片节点
    const dom = document.querySelector('.er');
    // 创建一个新的canvas
    const Canvas = document.createElement('canvas');
    const width = document.body.offsetWidth; // 可见屏幕的宽
    const height = document.body.offsetHeight; // 可见屏幕的高
    const scale = window.devicePixelRatio; // 设备的devicePixelRatio
    // 将Canvas画布放大scale倍，然后放在小的屏幕里，解决模糊问题
    Canvas.width = width * scale;
    Canvas.height = height * scale;
    Canvas.getContext('2d').scale(scale, scale);

    html2canvas(dom, {
      canvas: Canvas,
      scale,
      useCORS: true,
      allowTaint: false,
      logging: true,
      width: width + 'px',
      hegiht: height + 'px',
    }).then((canvas) => {
      const context = canvas.getContext('2d');
      // 关闭抗锯齿形
      context.mozImageSmoothingEnabled = false;
      context.webkitImageSmoothingEnabled = false;
      context.msImageSmoothingEnabled = false;
      context.imageSmoothingEnabled = false;
      // canvas转化为图片
      const img = canvas2Image(canvas, canvas.width, canvas.height);
      document.body.appendChild(img);
      img.style.cssText = "width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;";
    })
  }

  function canvas2Image(canvas, width, height) {
    const retCanvas = document.createElement('canvas');
    const retCtx = retCanvas.getContext('2d');
    retCanvas.width = width;
    retCanvas.height = height;
    retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height);
    const img = document.createElement('img');
    img.src = retCanvas.toDataURL('image/jpeg'); // 可以根据需要更改格式
    return img;
  } //somechang  bug
</script>

</html>